<template>
    <div style="margin-bottom: 150px;">
        <h1>餐厅评估</h1>
        <el-header style="background-color:azure; text-align:center">
            餐厅菜单评分
        </el-header>
        <el-main class="main">

            <el-card style="max-width: 480px;margin: 10px;" v-for="dish in dishs" :key="dish.id">
                <template #header><strong>{{ dish.name }}</strong></template>
                <img data-v-fdac8142="" :src="dish.imgurl" class="image" alt="菜品图片">
                <div>{{ dish.discription }}</div>
                <div>
                    <el-button type="primary" @click="dialogFormVisible = true; nowdish = dish.id">评分</el-button>
                    <div v-for="evaluate in dish.evaluates" :key="evaluate.id">
                        分数：
                        <el-rate v-model="evaluate.score" class="ml-1" />
                        <div><el-tag size="large">{{ evaluate.content }}</el-tag></div> 
                    </div>
                </div>
            </el-card>
        </el-main>
    </div>
    <div>
        <el-dialog v-model="dialogFormVisible" title="评分" width="500">
            <el-form :model="form">
                <el-form-item label="分数">
                    <el-rate v-model="form.score" class="ml-1" />
                </el-form-item>
                <el-form-item label="评价">
                    <el-input v-model="form.content" placeholder="请输入评价" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false; cleardialog()">取消</el-button>
                    <el-button type="primary" @click="suamitinfo()">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>

export default {
    data() {
        return {
            dishs: [
                {
                    id: 1,
                    name: "麻婆豆腐",
                    imgurl: "https://puui.qpic.cn/vpic_cover/y3137uzvgnw/y3137uzvgnw_hz.jpg/498?max_age=7776000",
                    discription: "麻辣味浓，十分下饭",
                    evaluates: []
                },
                {
                    id: 2,
                    name: "红烧肉",
                    imgurl: "https://img2.baidu.com/it/u=4280876303,1094453921&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=1193&amp;h=800",
                    discription: "肥瘦相间，美味可口",
                    evaluates: []
                }
            ],
            nowdish: 0,
            dialogFormVisible: false,
            form: {
                score: '',
                content: ""
            }
        }
    },
    methods: {
        showdialog() {
            console.log("showdialog")
        },
        suamitinfo() {
            if (this.form.score == '0'||  this.form.score == ''){
                ElMessage.error('请输入分数')
                return
            }else if (this.form.content == ''){
                ElMessage.error('请输入评价')
                return
            }

            var i = this.dishs.findIndex(dish => dish.id == this.nowdish)
            var evaluate = { score: this.form.score, content: this.form.content }

            this.dishs[i].evaluates.push(evaluate)

           this.dialogFormVisible = false; 

            this.cleardialog();
            console.log(this.dishs)
        },
        cleardialog() {
            this.form.score = '0'
            this.form.content = ''
        }
    }
}

</script>

<style>
.main {
    display: flex;
    width: 100%;

}
</style>